<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/mine_page.css" rel="stylesheet"/>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
	</head>

	<body>
		<!-- 下拉刷新 -->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll" v-cloak>
				<!-- 内容 -->
				<div class="mui-content">
					<div class="top">
						<div class="image">
							<img id="user_img" src="./images/error.png"/>
						</div>
						<div class="top_text">
							<p id="name_info"></p>
						</div>
						
					</div>
					
					<div class="bill">
						<div class="head">账单</div>
						<div class="bottom">
							<div id="year_month">
								<div id="year" class="year_btn"><p>{{local_list.local_year}}</p></div>
								<div style="width: 90%; height: 2px; background-color: white; float: left; margin-left: 8%;"></div>
								
								<div id="month" class="month_btn"><p><label v-if="local_list.local_month < 10">0</label>{{local_list.local_month}}</p></div>
							</div>
							
							
							<div class="other">
								<p class="text">收入</p>
								<p class="num" id="shouru">{{parseFloat(local_list.local_in).toFixed(2)}}</p>
							</div>
							<div class="other">
								<p class="text">支出</p>
								<p class="num" id="zhichu">{{parseFloat(local_list.local_out).toFixed(2)}}</p>
							</div>
							<div class="other">
								<p class="text">结余</p>
								<p class="num" id="jieyu">{{parseFloat(local_list.local_amount).toFixed(2)}}</p>
							</div>
						</div>
					</div>
					<!-- 隐藏模块 -->
					<div id="popover" class="mui-popover">
						<div class="mui-input-row mui-radio mui-left b">
							<label>2020</label>
							<input type="radio" name="checkbox1" id="" value="2020" class="rds" checked="checked"/>
						</div>
						<div class="mui-input-row mui-radio mui-left b">
							<label>2019</label>
							<input type="radio" name="checkbox1" id="" value="2019" class="rds"/>
						</div>
						<div class="mui-input-row mui-radio mui-left b">
							<label>2022</label>
							<input type="radio" name="checkbox1" id="" value="2022" class="rds"/>
						</div>
						<div class="mui-input-row mui-radio mui-left b">
							<label>2021</label>
							<input type="radio" name="checkbox1" id="" value="2021" class="rds"/>
						</div>
						<div class="mui-input-row mui-radio mui-left b">
							<label>2024</label>
							<input type="radio" name="checkbox1" id="" value="2024" class="rds"/>
						</div>
						<div class="mui-input-row mui-radio mui-left b">
							<label>2023</label>
							<input type="radio" name="checkbox1" id="" value="2023" class="rds"/>
						</div>
						<p style="text-align: center;">选择月份</p>
						<hr />
						<button type="button" class="mui-btn mui-btn-blue">1月</button>
						<button type="button" class="mui-btn mui-btn-blue">2月</button>
						<button type="button" class="mui-btn mui-btn-blue">3月</button>
						<button type="button" class="mui-btn mui-btn-blue">4月</button>
						<button type="button" class="mui-btn mui-btn-blue">5月</button>
						<button type="button" class="mui-btn mui-btn-blue">6月</button>
						<button type="button" class="mui-btn mui-btn-blue">7月</button>
						<button type="button" class="mui-btn mui-btn-blue">8月</button>
						<button type="button" class="mui-btn mui-btn-blue">9月</button>
						<button type="button" class="mui-btn mui-btn-blue">10月</button>
						<button type="button" class="mui-btn mui-btn-blue">11月</button>
						<button type="button" class="mui-btn mui-btn-blue" style="margin-bottom: 20px;">12月</button>
						
					</div>
					<br>
					<hr >
					<!-- 显示类别详情 -->
					<div class="detail_info mui-card-content">
						<div class="" style="height: 50px; line-height: 50px; text-align: left; color: #929292; font-size: 15px;">
							&nbsp;&nbsp;&nbsp;分类列表
						</div>
						
						<div class="tab" title="餐饮">
							<p class="type" style="background: url(images/food.png) no-repeat 65px 15px; background-size: 30px 30px;">餐&nbsp;饮</p>
							<!-- <hr style="height:5px;border:none;border-top:3px double seagreen;" /> -->
							<p class="money">{{parseFloat(local_list.local_food).toFixed(2)}}</p>
						</div>
						<div class="tab d" title="借出">
							<p class="type" style="background: url(./images/jie.png) no-repeat 67px 17px; background-size: 25px 25px;">借&nbsp;出</p>
							<!-- <hr style="height:5px;border:none;border-top:3px double seagreen;" /> -->
							<p class="money">{{parseFloat(local_list.local_jie).toFixed(2)}}</p>
						</div>
						<div class="tab" title="娱乐">
							<p class="type" style="background: url(images/game.png) no-repeat 65px 15px; background-size: 30px 30px;">娱&nbsp;乐</p>
							<!-- <hr style="height:5px;border:none;border-top:3px double seagreen;" /> -->
							<p class="money">{{parseFloat(local_list.local_game).toFixed(2)}}</p>
						</div>
						<div class="tab d" title="通讯">
							<p class="type" style="background: url(images/phone.png) no-repeat 65px 15px; background-size: 30px 30px;">通&nbsp;讯</p>
							<!-- <hr style="height:5px;border:none;border-top:3px double seagreen;" /> -->
							<p class="money">{{parseFloat(local_list.local_phone).toFixed(2)}}</p>
						</div>
						<div class="tab" title="购物">
							<p class="type" style="background: url(images/shop.png) no-repeat 65px 15px; background-size: 30px 30px;">购&nbsp;物</p>
							<!-- <hr style="height:5px;border:none;border-top:3px double seagreen;" /> -->
							<p class="money">{{parseFloat(local_list.local_shop).toFixed(2)}}</p>
						</div>
						<div class="tab d" title="交通">
							<p class="type" style="background: url(images/traffic.png) no-repeat 65px 15px; background-size: 30px 30px;">交&nbsp;通</p>
							<!-- <hr style="height:5px;border:none;border-top:3px double seagreen;" /> -->
							<p class="money">{{parseFloat(local_list.local_traffic).toFixed(2)}}</p>
						</div>
						<div class="tab c" title="杂项">
							<p class="type" style="background: url(images/other.png) no-repeat 65px 15px; background-size: 30px 30px;">杂&nbsp;项</p>
							<!-- <hr style="height:5px;border:none;border-top:3px double seagreen;" /> -->
							<p class="money">{{parseFloat(local_list.local_other).toFixed(2)}}</p>
						</div>
						<div class="tab d c" title="收入">
							<p class="type" style="background: url(images/income.png) no-repeat 65px 15px; background-size: 30px 30px;">收&nbsp;入</p>
							<!-- <hr style="height:5px;border:none;border-top:3px double seagreen;" /> -->
							<p class="money">{{parseFloat(local_list.local_income).toFixed(2)}}</p>
						</div>
					</div>
					<br>
					<hr >
					
					<div class="my_exit">
						<button type="button" class="set" id="more">设&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置</button>
						<button type="button" class="exit">退&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出</button>
					</div>
				</div>
			</div>
		</div>
		
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			
			function get_info(year,month){
				mui.ajax(localStorage.getItem('request_url')+ "cost/show_local/?token="+localStorage.getItem('uid'), {
				    data:"token=" + localStorage.getItem('uid') + "&year=" + year + "&month=" + month,
				    dataType:'json',  
				    type:'POST',  
				    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
				    timeout:2000,  
				    success:function show(e){
						app.local_list = e.data
						mui.toast('同步完成');
						localStorage.setItem('jieyu', JSON.stringify(e.data.local_amount))
						localStorage.setItem('zhichu', JSON.stringify(e.data.local_out))
						localStorage.setItem('shouru', JSON.stringify(e.data.local_in))
					},  
				    error:function(xhr,type,errorThrown){
						mui.toast('获取数据失败...下拉刷新');
						var rdata = JSON.parse(xhr.responseText)
				    }  
				});
			}
			
			function getRadioRes(className){
				var rdsObj = document.getElementsByClassName(className);
				var checkVal = null;
				for(i=0; i< rdsObj.length; i++){
					if(rdsObj[i].checked){
						checkVal = rdsObj[i].value;
					}
				}
				return checkVal
			};
			
			// 请求余额
			app = new Vue({
			     el:'.mui-scroll',
			     data:{
			        local_list: {
								"local_year": "2020",
								"local_month": "2",
								"local_amount": 3000.0,
								"local_in": 0.0,
								"local_out": 0.0,
								"local_jie": 0.0,
								"local_food": 0.0,
								"local_phone": 0.0,
								"local_game": 0.0,
								"local_traffic": 0.0,
								"local_shop": 0.0,
								"local_income": 0.0,
								"local_other": 0.0
							},
			     },
			});
			
			setTimeout(function(){
				myRefresh();
			},200)

			document.getElementById('more').addEventListener('tap',function(){
				mui.openWindow({
					url : 'update_page.html',
					id : 'update_page.html'
				});
			})
			
			mui.init({
				pullRefresh : {
					container:"#pullrefresh",
					down: {
						height:50,
						style:'circle',
						// auto:true,
						callback:myRefresh
					}
				},
			});
			// 下拉刷新
			function myRefresh(){
				setTimeout(function(){
					var uid = localStorage.getItem("uid")
					if(uid==null){
						document.getElementById('name_info').innerText = '登录/注册';
						document.getElementById('user_img').src = "static_img/none.png";
					}else{
						// 刷新数据
						var times = new Date();
						var year = times.getFullYear()
						var month = (times.getMonth()+1)
						document.getElementById('name_info').innerText = localStorage.getItem("login_name");
						document.getElementById('user_img').src = localStorage.getItem('request_url')+'static/user_upload/'+localStorage.getItem('login_img');
						// 发送ajax
						get_info(year,month)
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				},200);
			}
			
			mui.plusReady(function(){
				window.addEventListener('customEvent', function(event) {
				    // mui.fire()传过来的额外的参数，在event.detail中；
				    var detail = event.detail;
				    // var param = detail.param;
				    // 执行相应的ajax或者操作DOM等操作
					myRefresh()
				});
				
				// 给类别加事件
				for(var r=0 ; r<document.getElementsByClassName('tab').length; r++){
					document.getElementsByClassName('tab')[r].addEventListener('tap',function(){
						var uid = localStorage.getItem("uid")
						if(uid==null){
							mui.openWindow({
								url : 'login.html',
								id : 'login.html'
							});
						}else{
							var type = this.title
							var year = document.getElementById('year').firstElementChild.innerText
							var month = document.getElementById('month').firstElementChild.innerText
							mui.openWindow({
								url : 'detail_info.html',
								id : 'detail_info.html',
								extras:{
									year:year,
									month:month,
									type:type,
								},
							});
						}
					})
				}
				
				
				// 跳转detail详情
			    document.getElementsByClassName('head')[0].addEventListener('tap',function(){
					var uid = localStorage.getItem("uid")
					if(uid==null){
						mui.openWindow({
							url : 'login.html',
							id : 'login.html'
						});
					}else{
						var year = document.getElementById('year').firstElementChild.innerText
						var month = document.getElementById('month').firstElementChild.innerText
						var type = '全部'
						mui.openWindow({
							url : 'detail_info.html',
							id : 'detail_info.html',
							extras:{
								year:year,
								month:month,
								type:type
							},
						});
					}	
			    });
				
				for(var i=0; i<document.getElementsByClassName('other').length;i++){
					document.getElementsByClassName('other')[i].addEventListener('tap',function(){
						var uid = localStorage.getItem("uid")
						if(uid==null){
							mui.openWindow({
								url : 'login.html',
								id : 'login.html'
							});
						}else{
							var year = document.getElementById('year').firstElementChild.innerText
							var month = document.getElementById('month').firstElementChild.innerText
							var type = '全部'
							mui.openWindow({
								url : 'detail_info.html',
								id : 'detail_info.html',
								extras:{
									year:year,
									month:month,
									type:type
								},
							});
						}
					});
				};
				
				// 选择月份
				// 点击修改按钮
				document.getElementById('year_month').addEventListener('tap',function(){
					mui('.mui-popover').popover('toggle',);
				})
				
				for(var y=0; y<document.getElementsByClassName('mui-btn').length;y++){
					document.getElementsByClassName('mui-btn')[y].addEventListener('tap',function(){
						var uid = localStorage.getItem("uid")
						if(uid==null){
							mui.openWindow({
								url : 'login.html',
								id : 'login.html'
							});
						}else{
							var year = getRadioRes('rds')
							var month = this.innerText.split('月')[0]
							// mui.alert(month)
							get_info(year,month)
							mui('.mui-popover').popover('toggle',);
						}
					})
				}
				
				
				// 用户页面
				document.getElementsByClassName('top')[0].addEventListener('tap',function(){
					var login_token = localStorage.getItem('uid')
					if(login_token==null){
						mui.openWindow({
							url : 'login.html',
							id : 'login.html'
						});
					}else{
						mui.openWindow({
							url : 'setting.html',
							id : 'setting.html'
						});
					}
					
				});
				
				
				document.getElementsByClassName('exit')[0].addEventListener('tap',function(){
					var btnArray = ['下次再见', '不走了']; 
					mui.confirm('小主真要离开吗？', '🥺', btnArray, function(e) { 
						if (e.index == 0) { 
							plus.runtime.quit(); 
						}
					})
				});
			})
		
		</script>
	</body>

</html>
